<template>
  <div class="address-container">
    <nav-bar>
      <div class="left" slot="left"  @click="goBack()">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div slot="center">用户地址</div>
    </nav-bar>
    <div class="address-content">
      <van-address-edit
          :address-info="addressInfo"
          :area-list="areaList"

          show-postal
          show-delete
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
      />
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import { areaList } from '@vant/area-data';
import {addAddress} from "../../api/profile/profile";
import {Toast} from "vant";
export default {
  name: "addAddress",
  components: {
    NavBar
  },
  data() {
    return {
      areaList,
      searchResult: [],
      addressInfo:{}
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    onChangeDetail(value){
      console.log(value);
    },
    onDelete(){
      console.log('删除');
    },
    async onSave(content){
      console.log(content);
      let addressInfo = {
        name:content.name,
        address:content.addressDetail,
        phone:content.tel,
        province:content.province,
        city:content.city,
        county:content.county,
        is_default:content.isDefault ? 1 : 0
      }
      const res = await addAddress(addressInfo)
      if(res.status === 201){
        Toast.success('添加成功')
        await this.$router.push({path: '/addressList'})
      }
      console.log(res);
      console.log(content);
    }
  }
}
</script>

<style scoped lang="css">
.address-container{
  padding-top: 45px;
}
.left{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.iconfont{
  font-size: 24px;
}
.van-button--danger{
  background-color: #42bBaa !important;
  border: none;
}
</style>